1. 做第一個選單的頁面"柚子成長史" intoduce.html
2. 每個網站不管哪個頁面，上面&下面區塊都不動，所以先建立一個樣板 template(重複區塊不用一直打)→ 另存一個新檔案"template" (一定要另存，不要直接刪除)
3. 開啟template檔案，把story& banner2 刪掉，放入該頁面的內容(其他不動，來顯示上面&下面區塊不動)
   ※利用樣板 template 來做其他的頁面
   4. 先建立<div class="introduce"></div>，再放入內容
4. 照設計圖寫原始碼

>   <div class="introduce">
>     <div class="introduce-list">
>           施肥
>           剪枝
>           除草
>           包袋
>           採收
>    </div>
>    <div class="introduce-img">放入圖片</div>

** Div 是區塊元素，所以是上下排列，不能做左右排列**

CSS中，控制introduce:

	.introduce-list{
		width: 30%;
		height: 300px;
		background-color: #D7F9D7;
	}
	.introduce-img{
		width: 40%;
		height: 300px;
		background-color:#C7ECF1;
	}
	.float-right{
		width: 30%;
		height: 300px;
		background-color: #F8BCBC;
	}

6. 如何讓div 變成左右編排(如上圖)，在CSS中控制 float屬性 (做排版的呈現，解決block不能左右排的缺陷!)

	.introduce-list{
		width: 30%;
		height: 300px;
		background-color: #D7F9D7;
		float: left;
	}
	.introduce-img{
		width: 40%;
		height: 300px;
		background-color:#C7ECF1;
		float: left;
	}
※float: left 是指區塊靠左對齊

LINE創辦人 李海珍:
「能活下來的不是強者與智者，而是最能夠適應環境的人」